<template>
  <div>
    <vxe-grid v-bind="grid" ref="xGrid">
      <template #toolbar_buttons>
        <a-space>
          <eip-toolbar @del="del"></eip-toolbar>
        </a-space>
      </template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #checkboxHeader="{ checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleAllCheckboxRow()">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
      <template #checkbox="{ row, checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>

      <template #operate="{ row }">
        <a-tooltip title="下线" @click="tableDelRow(row)">
          <label class="text-red eip-cursor-pointer">下线</label>
        </a-tooltip>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import { online, kickout } from "@/services/system/monitor/onlineuser";
import { selectTableRow, deleteConfirm } from "@/utils/util";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      grid: {
        id: "onlineuser",
        key: null,
        loading: true,
        height: this.eipTableHeight(),
        printConfig: {},
        exportConfig: {},
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          {
            type: "checkbox",
            width: 50,
            slots: {
              checkbox: "checkbox",
              header: "checkboxHeader",
            },
            fixed: "left",
            align: "center",
          },
          { type: "seq", width: 60, fixed: "left" },

          {
            field: "name",
            title: "名称",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "organizationName",
            title: "组织",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "connectionId",
            title: "连接Id",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remoteIp",
            title: "客户端IP",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remoteIpAddress",
            title: "归属地址",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "userAgent",
            title: "浏览器代理",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "osInfo",
            title: "操作系统",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "browser",
            title: "浏览器",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "goOnlineTime",
            title: "上线时间",
            width: 120,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            title: "操作",
            width: 100,
            align: "center",
            fixed: "right",
            slots: {
              default: "operate",
            },
          },
        ],
        proxyConfig: {
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                online().then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    resolve(result.data);
                  }
                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },
    };
  },
  created() {},
  computed: {
    ...mapGetters("account", ["user"]),
  },

  methods: {
    /**
     * 删除
     */
    tableDelRow(row) {
      let that = this;
      deleteConfirm(
        "下线【" + row.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: "下线中..." });
          kickout({ id: row.connectionId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              //判断踢下线及当前用户的LoginId是否一致
              var loginId = that.user.loginId;
              if (loginId != row.loginId) {
                that.tableInit();
                that.$message.success(result.msg);
              }
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },

    /**
     * 删除
     */
    del() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (rows) {
          //提示是否删除
          deleteConfirm(
            "确认将选中用户批量下线",
            function () {
              //加载提示
              that.$loading.show({ text: "下线中..." });
              let ids = that.$utils.map(rows, (item) => item.connectionId);
              kickout({ id: ids.join(",") }).then((result) => {
                that.$loading.hide();
                if (result.code == that.eipResultCode.success) {
                  that.tableInit();
                  that.$message.success(result.msg);
                } else {
                  that.$message.error(result.msg);
                }
              });
            },
            that
          );
        },
        that,
        false
      );
    },
  },
};
</script>
